<div class="topic">
    <div class="container">
        <div class="row">
            <div class="col-sm-4">
                <h3><?= $title ?></h3>
            </div>
            <div class="col-sm-8">
                <ol class="breadcrumb pull-right hidden-xs">
                    <li><?= anchor('home/index', 'Home') ?></li>
                    <li><?= anchor('portfolio/index', 'Portfolio') ?></li>
                    <li class="active"><?= $title ?></li>
                </ol>
            </div>
        </div>
    </div>
</div>

<!--?= var_dump($latest_portfolio); ?-->
<!--?= var_dump($item); ?-->

<div class="container">
    <div class="row">
        <div class="col-sm-6">
            <div class="portfolio-slideshow">
                <!-- Image Carousel -->
                <div id="portfolio-slideshow" class="carousel slide" data-ride="carousel">
                    <!-- Indicators -->
                    <ol class="carousel-indicators">
                        <?php if (empty($item['img'])) : ?>
                            <li data-target="#portfolio-slideshow" data-slide-to="0" class="active"></li>
                            <?php
                        else :
                            $i = 0;
                            foreach ($item['img'] as $por_img) :
                                ?>
                                <li data-target="#portfolio-slideshow" data-slide-to="<?= $i ?>"></li>
                                <?php
                                $i++;
                            endforeach;
                        endif;
                        ?>
                    </ol>
                    <!-- Wrapper for slides -->
                    <div class="carousel-inner">
                        <?php if (empty($item['img'])) : ?>
                            <div class="item active">
                                <img src="<?= $por_img_path . 'logo.png' ?>" alt="default">
                            </div>
                            <?php
                        else :
                            $i = 0;
                            foreach ($item['img'] as $item_img) :
                                if ($i === 0) :
                                    echo '<div class="item active">';
                                else :
                                    echo '<div class="item">';
                                endif;
                                ?>
                                <img src="<?= $por_img_path . $item_img['img_url'] ?>" alt="default">
                            </div>
                            <?php
                            $i++;
                        endforeach;
                    endif;
                    ?>
                </div>
                <!-- Controls -->
                <a class="carousel-arrow carousel-arrow-prev" href="#portfolio-slideshow" data-slide="prev">
                    <i class="fa fa-angle-left"></i>
                </a>
                <a class="carousel-arrow carousel-arrow-next" href="#portfolio-slideshow" data-slide="next">
                    <i class="fa fa-angle-right"></i>
                </a>
            </div>
        </div>
    </div>
    <div class="col-sm-6">
        <h3 class="headline second-child"><span><?= $item['title']; ?></span></h3>
        <p><?= $item['description']; ?></p>
        <br />
        <h4 class="headline"><span>Portfolio Info</span></h4>
        <table class="table">
            <tr>
                <td>Completion Time<td>
                <td><?= $item['completion_time'] . ' days' ?></td>
            </tr>
            <tr>
                <td>Quality of Work<td>
                <td style="color: #dd4b39">
                    <?php
                    $quality_of_work = $item['quality_of_work'];
                    for ($i = 0; $i < 5; $i++) {
                        if ($quality_of_work >= 1) {
                            echo '<i class="fa fa-star"></i>';
                        } elseif ($quality_of_work < 1 && $quality_of_work > 0) {
                            echo '<i class="fa fa-star-half-full"></i>';
                        } else {
                            echo '<i class="fa fa-star-o"></i>';
                        }
                        $quality_of_work--;
                    }
                    ?>
                </td>
            </tr>
            <tr>
                <td>Communication<td>
                <td style="color: #dd4b39">
                    <?php
                    $communication = $item['communication'];
                    for ($i = 0; $i < 5; $i++) {
                        if ($communication >= 1) {
                            echo '<i class="fa fa-star"></i>';
                        } elseif ($communication < 1 && $communication > 0) {
                            echo '<i class="fa fa-star-half-full"></i>';
                        } else {
                            echo '<i class="fa fa-star-o"></i>';
                        }
                        $communication--;
                    }
                    ?>
                </td>
            </tr>
            <tr>
                <td>Expertise<td>
                <td style="color: #dd4b39">
                    <?php
                    $expertise = $item['expertise'];
                    for ($i = 0; $i < 5; $i++) {
                        if ($expertise >= 1) {
                            echo '<i class="fa fa-star"></i>';
                        } elseif ($expertise < 1 && $expertise > 0) {
                            echo '<i class="fa fa-star-half-full"></i>';
                        } else {
                            echo '<i class="fa fa-star-o"></i>';
                        }
                        $expertise--;
                    }
                    ?>
                </td>
            </tr>
            <tr>
                <td>Professionalism<td>
                <td style="color: #dd4b39">
                    <?php
                    $professionalism = $item['professionalism'];
                    for ($i = 0; $i < 5; $i++) {
                        if ($professionalism >= 1) {
                            echo '<i class="fa fa-star"></i>';
                        } elseif ($professionalism < 1 && $professionalism > 0) {
                            echo '<i class="fa fa-star-half-full"></i>';
                        } else {
                            echo '<i class="fa fa-star-o"></i>';
                        }
                        $professionalism--;
                    }
                    ?>
                </td>
            </tr>
            <tr>
                <td>Would Hire Again<td>
                <td style="color: #dd4b39">
                    <?php
                    $would_hire_again = $item['would_hire_again'];
                    for ($i = 0; $i < 5; $i++) {
                        if ($would_hire_again >= 1) {
                            echo '<i class="fa fa-star"></i>';
                        } elseif ($would_hire_again < 1 && $would_hire_again > 0) {
                            echo '<i class="fa fa-star-half-full"></i>';
                        } else {
                            echo '<i class="fa fa-star-o"></i>';
                        }
                        $would_hire_again--;
                    }
                    ?>
                </td>
            </tr>
            <tr>
                <td>Feedback<td>
                <td><kbd><?= ucfirst($item['feedback']); ?></kbd></td>
            </tr>
        </table>
    </div>
</div> <!-- / .row -->
<div class="row">
    <div class="col-sm-12">
        <h3 class="headline"><span>Latest Works</span></h3>
    </div>
    <?php foreach ($latest_portfolio as $latest_item) : ?>
        <div class="col-sm-3">
            <div class="portfolio-item">
                <div class="portfolio-thumbnail">
                    <?php
                    if (empty($latest_item['img'])) {
                        $img_path = $por_img_path . 'logo.png';
                    } else {
                        $img_path = $por_img_path . $latest_item['img'][0]['img_url'];
                    }
                    ?>
                    <img class="img-responsive" src="<?= $img_path ?>" alt="<?= $latest_item['title'] ?>">
                    <div class="mask">
                        <p>
                            <a href="<?= $img_path; ?>" data-lightbox="template_showcase"><i class="fa fa-search-plus fa-2x"></i></a>
                                <?= anchor('portfolio/detail/' . $latest_item['slug'], '<i class="fa fa-info-circle fa-2x"></i>') ?>
                        </p>
                    </div>
                </div>
            </div> <!-- / .portfolio-item -->
        </div>
    <?php endforeach; ?>
</div> <!-- / .row -->
</div> <!-- / .container -->